<template>
  <van-sticky>
    <van-nav-bar
      title="测评结果"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
  </van-sticky>
  <div class="image-content">
    <div class="image-box">
      <van-image width="150" height="100" :src="logo" />
    </div>
  </div>
  <div v-cloak class="content">
    <div class="epilogue-box">
      <p class="epilogue">
        亲爱的{{ isEnterprise ? '用户' : '同学' }}您已检测完毕
      </p>
      <p v-if="!isEnterprise" class="epilogue">祝您学习进步，身心健康</p>
      <p v-else class="epilogue">祝您事业有成，身心健康</p>
      <van-image width="150" height="150" :src="subscriptionRef" />
      <p class="please">请识别二维码关注公众号</p>
    </div>
    <van-button
      v-if="!teacherValue || isEnterprise"
      color="#62BB85"
      class="button"
      type="primary"
      block
      @click="goToReport"
    >
      查看报告
    </van-button>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref, onBeforeMount, watch } from 'vue'
import { useRouter } from 'vue-router'
import yellow from './yellow.png'
import green from './green.png'
import red from './red.png'
import logo from '/@/assets/logo.png'
import subscription from './img/subscription.jpg'
import { getUserInfo } from '../../util/business-util'
import { useStore } from '/@/store'

export default defineComponent({
  components: {},
  props: {
    scoreSum: {
      type: Number,
      default: 0,
    },
    userProjectId: {
      type: String,
      default: '',
    },
  },
  setup(props) {
    const router = useRouter()
    const { commit, state, dispatch } = useStore()
    const color = computed(() => {
      if (props.scoreSum < 20) {
        return 'green'
      }

      if (props.scoreSum >= 20 && props.scoreSum < 30) {
        return 'yellow'
      }

      if (props.scoreSum >= 30) {
        return 'red'
      }
      return ''
    })
    let userInfo: any | null = ref(null) // 当前用户信息
    onBeforeMount(async () => {
      // 获取用户信息
      userInfo.value = await getUserInfo(
        commit,
        state,
        state.user.userId,
        false
      )
    })
    const isEnterprise = ref(false)

    const teacherValue = ref(false)

    watch(
      () => userInfo.value,
      (val) => {
        if (val.postName.includes('学生')) {
          teacherValue.value = true
        } else {
          teacherValue.value = false
        }
        isEnterprise.value = state.enterprise.includes(val.tenantId)
      }
    )

    return {
      isEnterprise,
      color,
      logo,
      yellowPng: ref(yellow),
      greenPng: ref(green),
      redPng: ref(red),
      subscriptionRef: ref(subscription),
      teacherValue,
      onClickLeft() {
        router.push({ name: 'Classify' })
      },
      goToReport() {
        router.push({
          name: 'EvaluateReport',
          query: { userProjectId: props.userProjectId },
        })
      },
    }
  },
})
</script>

<style lang="less" scoped>
.content {
  text-align: center;
  padding: 20px 12px;
  background-color: white;

  .epilogue {
    font-size: 18px;
  }

  .button {
    margin-top: 20px;
  }
}

.image-box {
  // margin-bottom: 40px;
}

.epilogue-box {
  color: #009944;
  font-weight: 700;
  font-size: 16px;
  .epilogue {
    margin: 8px 0;
  }
  .please {
    margin: 6px 0;
  }
}
.image-content {
  text-align: center;
  padding: 46px 12px 0 12px;
  border-radius: 24px 24px 0 0;
  background-color: white;
  margin-bottom: 20px;
}
</style>
